import { Outlet,Link,useLocation } from "react-router-dom";

import { Layout,Menu } from "antd";

const { Header, Content, Footer ,Sider } = Layout;
import { routerlist } from "../router/index";
const god=(routes)=>{
    return routes.map(route=>{
        const meneItem={
            label:route.meta.title,
            key:route.path
        }
        if(route.children){
            return{
                ...meneItem,
                children:god(route.children)
            }
        }
        return{
            ...meneItem,
            label:<Link to={route.path}>{route.meta.title}</Link>
        }
    })
}

export default function Layouts() { 
    const location=useLocation()
    return(
        <Layout style={{backgroundColor:'var(--background-color)',color:'var(--text-color)'}}>
            <Sider style={{minHeight:'100vh'}}>
                <Menu theme="dark" mode="inline" selectedKeys={[location.pathname]} items={god(routerlist)} />
            </Sider>
            <Content style={{backgroundColor:'var(--background-color)',color:'var(--text-color)'}}>
                <Outlet />
            </Content>
        </Layout>
    )
}